<!doctype html>
<html>

	<head>
		<meta name="viewport">
		<meta charset="utf-8"/>
		<script src="js/raphael.js"></script>
		<!-- Latest compiled and minified CSS -->
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
		<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
		<link rel="stylesheet" href="css/style.css"> 
		<link rel="stylesheet" href="jquery.ui.rotatable.css">
		<script src="js/raphael.js" ></script>
        <script src="js/DrawForm.js"></script>
        <script src="js/jquery.js" ></script>
		<script src="js/script.js"></script>
		<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  		<script src="//code.jquery.com/jquery-1.10.2.js"></script>
  		<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  		<script src="js/jquery.ui.rotatable.js"></script>
        <script src="js/jquery.ui.touch-punch.js"></script>
	
		<title>Productos Cobra</title>
	</head>
	    <body lang="en">
	    	<header>
	    		 <div class="page-header">
  					<h1>    <span class="glyphicon glyphicon-picture"></span>     Tangram<small> Construye tus ideas</small></h1>
				 </div>
	    	</header>
	    		<div id="Tablero">
	    				<div id="draggable">
	    					<ol id="forms_tangram">
			    				<li><img src="img/trianguloisoceles.png" id="forms1" ondblclick="seleccion(event);"/></li>
			    				<li><img src="img/paralelogramo.png" id="forms2" ondblclick="seleccion(event);"/></li>
			    				<li><img src="img/rombo.png" id="forms3" ondblclick="seleccion(event);"/></li>
			    				<li><img src="img/triangulo2.png" id="forms4" ondblclick="seleccion(event);"/></li>
			    				<li><img src="img/triangulo4.png" id="forms5" ondblclick="seleccion(event);"/></li>
			    				<li><img src="img/triangulo5.png" id="forms6" ondblclick="seleccion(event);"/></li>
			    				<li><img src="img/triangulo6.png" id="forms7" ondblclick="seleccion(event);"/></li>
	    					</ol>
		    			</div>
		        </div>
		        <div id="controles">
		        	<button type="button" class="btn btn-default btn-lg" onclick="girar_elemento(true)">Agrandar  <span class="glyphicon glyphicon-chevron-right"></span></button>
		        	<button type="button" class="btn btn-default btn-lg" onclick="girar_elemento(false)">No Agrandar  <span class="glyphicon glyphicon-chevron-right"></span></button>
		        </div>
	    	<div id="figuras">
	    	</div>	
		<footer>
		</footer>
	</body>
</html>
